<template>
  <div ref="container"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; 

const container = ref(null);

onMounted(() => {
  // 创建场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.z = 5;

  // 创建渲染器
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  container.value.appendChild(renderer.domElement);

  // 创建灯光
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
  directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);

  // 加载 GLTF 模型
  const loader = new GLTFLoader();
  const clock = new THREE.Clock(); // 用于控制动画时间
  let mixer; // 声明 mixer 变量

  loader.load(
    '/RobotExpressive.glb', // 使用绝对路径
    (gltf) => {
      const model = gltf.scene;
      scene.add(model);

      // 检查是否有动画数据
      if (gltf.animations.length > 0) {
        // 初始化动画混合器并播放动画
        mixer = new THREE.AnimationMixer(model); // 初始化 mixer
        gltf.animations.forEach((clip) => {
          // 播放所有动画（若模型有多个动画，可按需选择播放特定动画）
          mixer.clipAction(clip).play(); 
        });
      } else {
        console.log('模型没有动画数据');
      }
    },
    undefined,
    (error) => {
      console.error('模型加载出错:', error);
    }
  );

  // 渲染循环（新增动画更新逻辑）
  const animate = () => {
    requestAnimationFrame(animate);
    const delta = clock.getDelta(); // 获取时间间隔

    // 更新动画混合器（驱动动画播放）
    if (mixer) { 
      mixer.update(delta);
    }

    renderer.render(scene, camera);
  };

  animate();
});
</script>

<style scoped>
div {
  width: 100%;
  height: 100vh;
}
</style>